import React, {Component} from "react";
import PropTypes from "prop-types";
import {DeviceEventEmitter, View, Modal} from "react-native";
import {Button, Flex, InputItem, List} from "antd-mobile";
import {createForm} from "rc-form";
import moment from "moment";
import "moment/locale/zh-cn";

const Item = List.Item
const Brief = Item.Brief
const zhNow = moment().locale('zh-cn').utcOffset(8)

const scancodeImg = require('../../img/Normal/scancode.png')
const handenterImg = require('../../img/Normal/handenter.png')
const cameraImg = require('../../img/Normal/camera.png')
const batchImg = require('../../img/Normal/batch.png')
const alert = Modal.alert

class BatchEnterPopup extends Component {
  static propTypes = {
    onSave: PropTypes.func,
    onClose: PropTypes.func,
  }
  constructor(props) {
    super(props)
  }
  componentWillMount() {
    console.log('batch enter popup mount')
    this.listener = DeviceEventEmitter.addListener('SCANCODE', (v) => {
    })
  }

  componentWillUnmount() {
    console.log('batch enter popup unmount')
    this.listener.remove()
  }

  render = () => {
    const { getFieldProps } = this.props.form;
    return (
      <View>
        <List renderHeader={() => "批量输入"}>
          <InputItem
            {...getFieldProps("firstErCode")}
            placeholder="第一个条形码号"
            clear
            autoFocus
          >条形码号</InputItem>
          <InputItem
            {...getFieldProps("erCount")}
            type="number"
            placeholder=""
          >数量</InputItem>
          <Flex>
            <Flex.Item>
              <View style={{margin: 10}}>
                <Button onClick={this.onSave}>保存</Button>
              </View>
            </Flex.Item>
            <Flex.Item>
              <View style={{margin: 10}}>
                <Button onClick={this.onClose}>关闭</Button>
              </View>
            </Flex.Item>
          </Flex>
        </List>
      </View>
    )
  }
  onSave = () => {
    this.props.form.validateFields((err, values) => {
      if(values['firstErCode'].length != 20) {
        alert('提示', '码位为20位')
        return ;
      }
      if(values['erCount'] == undefined) {
        alert('提示', '数量必填')
        return false;
      }
      let combineV = values['firstErCode'] + '@' + values['erCount']
      this.props.onSave(combineV)
      this.props.onClose()
    });
  }
  onClose = () => {
    this.props.onClose()
  }
}

export default createForm()(BatchEnterPopup)
